<!-- 加工单列表 -->
<template>
	<view>
		<div>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="revert_upper">&#xe667;</i>
				<span slot="center-slot">{{titles}}</span>
				<!-- <i class="iconfont " slot="right-slot" @click="add">确定</i> -->
			</navitop>
		</div>
		 
		<div :style="'margin-top:' + nv_height">
			<view class="hederDiv" >
			<view class="Item" v-for="(iten,index) in tiList" :key="index" @tap="showModel(index,iten)">
				<text :class="['name',titleIndex==index?'showname':'']">{{iten.name}}</text>
				<view :class="['showbtn',titleIndex==index?'showBtnColor':'']"></view>
			</view>
		</view>			
			<!-- 加工单列表 -->
			<div v-if="machining_list">
				<mescroll-body ref="mescrollRef" @init="mescrollInits" @down="downCallbacks" @up="upCallbacks" :down="downOption" :up="upOption" >
					<view class="port" v-for="(item,index) in dataSorce" @click="portclick(item)">
						<div class="port_out">
							<div class='port_left'>生产部门：</div>
							<div class="port_right">{{item.officeName}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>任务单号：</div>
							<div class="port_right">{{item.voucherCode}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>单据时间：</div>
							<div class="port_right">{{item.reviewerDate}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>生产时间：</div>
							<div class="port_right">{{item.voucherDate}}</div>
						</div>
					</view>
				</mescroll-body>
			</div>
			
			<!-- 工序汇报列表 -->
			<div v-if="report_list">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
					<view class="port" v-for="(item,index) in report_dataSorce">
						<div class="port_out">
							<div class='port_left'>工序编码：</div>
							<div class="port_right">{{item.workCode}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>工序名称：</div>
							<div class="port_right">{{item.procedureName}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>派工单号：</div>
							<div class="port_right">{{item.productionDispatchCode}}</div>
						</div>
						<div class="port_out">
							<div class='port_left'>汇报单号：</div>
							<div class="port_right">{{item.reportCode}}</div>
						</div>
					</view>
				</mescroll-body>
			</div>
		</div>
	</view>
</template>

<script>
import navitop from '@/components/common/navi-top'	
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {list,workpage} from '@/common/api/job/machining.js'
export default {
	components:{
		navitop
	},
	mixins: [MescrollMixin],	
	data(){
		return {
			nv_height: '',
			titles:'汇报列表',
			dataSorce: [],
			report_dataSorce: [],
			report_list: false,	// 工序汇报
			machining_list: true,	// 加工单
			titleIndex: '',
			tiList: [
				{
					name: "汇报",
					code: 'gx'
				},{
				name: '工序汇报列表',
				code: 'hb'
			}],
			// 下拉刷新的配置
			downOption: {
				auto: false,
				beforeEndDelay: 300,
			},
			// 上拉加载的配置
			upOption: {
				auto: false,
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					use: true,
					tip: '暂无相关数据'
				},
				textNoMore: '没有更多数据了...',
				toTop: {
					offset: 1000 // 滚动多少才显示to-top 
				}
			},
			page: 1,
			
		}
	},
	mounted() {
		
		 this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
		 
		 let page = {current: 1,size:10};
			
		 this.font_list(page);
		 
		 this.tal_list(page);
		 
	},
	methods: {
		
		// 加工单获取列表
		font_list(page){
			list({page}).then((rows) => {
				if(rows.code == 200){
					this.dataSorce = rows.data;
				}
			})
		},
		
		// 工序汇报列表
		tal_list(page){
			workpage({page}).then((rows) => {
				let _this = this;
				if(rows.code == 200){
					if(this.page == 1){
						this.report_dataSorce = rows.data.records;
					}else{
						rows.data.records.filter((item) => {
							_this.report_dataSorce.push(item)
						})
					}
				}
			})
		},
		
		// 加工单跳转
		portclick(val){
			uni.navigateTo({
				url: '/components/index-modules/Manufacturing/detailed?id=' + val.id
			})
		},
		
		// 返回上一页
		revert_upper(){
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		
	
		// 头部切换事件
		showModel(val){
			this.titleIndex = val;
			if(val == 0){
				this.report_list = false;	
				this.machining_list = true;	
			}else{
				this.report_list = true;	
				this.machining_list = false;	
			}
		},
		
		mescrollInit(val){
			console.log(val)
		},
		
		/*下拉刷新的回调*/
		downCallback(val) {
			console.log('下拉--------')
			this.page == 1;
			let sun = {current: 1,size:10}; 
			this.tal_list(sun);
			// // 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
			setTimeout(() => {
				this.mescroll.endSuccess();
			}, 500)
		},
		
		// 上拉加载
		upCallback(page) {
			this.page++;
			let sun = {current: this.page,size:10}; 
			// let obj = {
			// 	current: page.num, // 页码, 默认1
			// 	size: page.size, // 页长, 默认10条
			// };
			this.tal_list(sun);
			setTimeout(()=>{
				this.mescroll.endErr();
			},500)
		},
		
		mescrollInits(val){
			console.log(val)
		},
		
		/*下拉刷新的回调*/
		downCallbacks(val) {
			console.log('下拉1--------')
			this.page == 1;
			let sun = {current: 1,size:10}; 
			this.font_list(sun);
			// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
			setTimeout(() => {
				this.mescroll.endSuccess();
			}, 500)
		},
		
		// 上拉加载
		upCallbacks(page) {
			this.page++;
			let sun = {current: this.page,size:10}; 
			// let obj = {
			// 	current: page.num, // 页码, 默认1
			// 	size: page.size, // 页长, 默认10条
			// };
			this.font_list(sun);
			setTimeout(()=>{
				this.mescroll.endErr();
			},500)
		},
	}
}	
</script>

<style lang="scss" scoped>
	.port{
		width: 95%;
		margin: auto;
		background-color: #fff;
		border-radius: 4px;
		margin-top: 10px;
	}
	.port_out {
		display: flex;
		div {
			height: 60rpx;
			line-height: 60rpx;
		}
	}
	.port_left {
		width: 30%;
		text-align: right;
	}
	.hederDiv {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: white;
		// position: fixed;
		// top: 0;
		// z-index: 10;
	}
	
	.Item {
		width: 350rpx;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}
	
	.name {
		color: #999999;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}
	
	.showname {
		color: #007AFF !important;
	}
	
	.showbtn {
		width: 150rpx;
		height: 8rpx;
		border-radius: 25rpx;
		background-color: white;
		margin-bottom: 10rpx;
	}
	
	.showBtnColor {
		background-color: #007AFF !important;
	}
</style>
